<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			* {
			    margin: 0;
			    padding: 0;
			    list-style: none;
			    font-family: '微软雅黑'
			}
			.mui.mui-content{
				width: 100%;
			}
			.user_context{
				width: 100%;
				font-size: 20px;
			}
			/* .user_context{
				width: 100%;
				position: absolute;
				top: 0;
			} */
			.user_context img{
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
			.user_context li{
				font-size: 17px;
		        margin-top: 10px;
		        padding-left: 10px;
		        width: 100%;
				overflow: hidden;
			}
			 .user_context li img{
		       float: left;
		    }
			.user_context li span{
			   width: 200px;	
		       background-color: white;
			   flex-wrap: wrap;
		       padding: 10px;
		       border-radius: 10px;
		       margin-left: 5px;
			   margin-right: 5px;
		       float: left;
		       /* border: 1px solid #ccc; */
		       box-shadow: 0 0 3px #ccc;
		    }
		    .user_context li .imgleft{
		        float: left;
		    }
		    .user_context li .spanleft{
		        float: left;
		    }
		    .user_context li .imgright{
		        float: right;
					margin-right: 10px;
			}
			.user_context li .spanright{
		        float: right;
		        background: #7cfc00;
		    }
		</style>
	
	
		<style type="text/css">
			.nav-top{
				position: relative;
				height: 100%;
			}
			#inputmessage{
				margin-left: 10px;
				margin-top: 5px;
				margin-bottom: 5px;
				width: 230px;
			}
			#sendmessage{
				width: 60px;
				height: 40px;
				border-radius: 5px;
				float: right;
				margin-right: 5px;
				margin-top: 5px;
				margin-bottom: 5px;
				background-color: #7CFC00;
			}
			.addmore{
				float: right;
				width: 50px;
				height: 50px;
				margin-bottom: 5px;
				margin-bottom: 5px;
				margin-right: 5px;
				background-color: red;
			}
			.addmore img{
				width: 100%;
				height: 100%;
			}
			.footer{
				height: 0px;
				overflow: hidden;
			}
			.footer-show{
				width: 100%;
				height: 200px;
				overflow-y: auto;
			}
		</style>
	</head>

	<body>
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
			<h1 class="mui-center mui-title">用户1</h1>
		</div>
		<div class="mui-scroll-wrapper mui-content">
			<div class="mui-scroll">
				 <!-- <ul class="user_context" id="message_info">
					   <li><img src='images/helogin.jpg' class="imgleft"/><span class="spanleft">heldo</span></li>
					   <li><img src='images/helogin.jpg' class="imgright"/><span class="spanright">hello</span></li>
					   <li><img src='images/helogin.jpg' class="imgleft"/><span class="spanleft">heldo</span></li>
					   <li><img src='images/helogin.jpg' class="imgright"/><span class="spanright">hello</span></li>
				 </ul> -->
				<ul class=" user_context" id="msglist">
				 </ul>
				</div>
		</div>
		
		<nav class="mui-bar mui-bar-tab">
			<div class="nav-top">
			<input type="text" name="" id="inputmessage" value="" placeholder=""  />
			<div class="addmore" id="addmore"><img src="images/addmore.jpg""></div>
			<button type="button" id="sendmessage" class="close-button">发送</button>
			</div>
			<div class="footer" id="footer">
				<!-- 展开工具栏 九宫格 -->
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-camera"></span>
							<div class="mui-media-body">Creme</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-email"><!-- <span class="mui-badge mui-badge-red">5</span> --></span>
							<div class="mui-media-body">Email</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-location"></span>
							<div class="mui-media-body">Location</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-phone"></span>
							<div class="mui-media-body">Phone</div>
						</a>
					</li>
				</ul>
			</div>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.locker.js"></script>
		<script src="js/app.js"></script>
	</body>
	<script type="text/javascript">
		/*
		js控制样式
		*/
		var flag = 0;	
		document.getElementById("addmore").onclick=()=>{
			var footer= document.getElementById("footer");
				if(footer.className=="footer"){
					footer.className = "footer-show";
				}else{
					footer.className = "footer";
				}
		}
		function getFocus(){
			// var footer= document.getElementById("footer");
			// var addmore = document.getElementById("addmore");
			// var sendmessage_button = document.getElementById("sendmessage");
			// sendmessage_button.className='sendmessage';
			// addmore.className = 'close-button';
			// if(footer.className=="footer-show"){
			// 	footer.className="footer"
			// }
		}
		function changebutton(){
			var button = document.getElementById('sendmessage');
			button.className = 'close-button';
			var addmore = document.getElementById("addmore");
			addmore.className = 'addmore';
		}
		//滚动区域
		mui('.mui-scroll-wrapper').scroll({
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
	</script>
	
	<script>	
		  function getValueInUrl(key) {
				let str = window.location.search.substring(1);
				let vars = str.split("&");
				for (var i = 0; i < vars.length; i++) {
					let pair = vars[i].split("=");
					if (pair[0] == key) {
						return pair[1];
					}
				}
				return (false);
			  }
			  //获取聊天对象id 存入sessionStorage
			  var rec = getValueInUrl("receive");
			  // console.log("receive:" + rec);
			  if (rec) {
				sessionStorage.setItem("receive", rec);
			  }
			  var nickname = getValueInUrl("nickname");
			  nickname = decodeURIComponent(nickname);
			  if(nickname){
				document.getElementsByClassName("mui-title")[0].innerHTML=nickname;
			  }
			function msgSend(msg) {
				let url = "../onlinechat/interface/sendMessage.php";
				let sign = localStorage.getItem("my_sign_str");
				let userid = localStorage.getItem("my_user_id");
				let receive = sessionStorage.getItem("receive");
				msgSendRequest(url, sign, userid, msg, receive);
			}
			function msgSendRequest(url, sign, user, msg, receive) {
				receive = receive || sessionStorage.getItem("receive");
				if (receive == false) {
					mui.alert('该会话没有聊天对象！');
					return false;
				}
				mui.ajax(url, {
					data: "sign_str=" + sign +"&user_id=" + user +"&receive_user_id=" + receive +"&message=" + msg,
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						//服务器返回响应，根据响应结果，分析是否获取成功；
						if (data.code == 0) {
							// mui.alert('消息发送成功');
							// console.log(data);
						} else {
							mui.alert('suc 消息发送失败:' + data.msg);
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						mui.alert('err 消息发送失败 ' + type);
						console.log(xhr);
						console.log(type);
						console.log(errorThrown);
					}
				})
			}
			var num = document.getElementsByClassName("msgboxleft").length + document.getElementsByClassName("msgboxright").length; //记录聊天条数
			function msggetRequest(){
				let url = "../onlinechat/interface/getMessages.php";
				let userid = localStorage.getItem("my_user_id");
				let sign = localStorage.getItem("my_sign_str");
				mui.ajax(url,{
					data:{
						sign_str:sign,
						user_id:userid
					},
					dataType:'json',
					type:'get',
					success:function(data){
						//console.log(data);
						var msglist = document.getElementById("msglist");
						for(let i=0;i<data.data.length;i++){
							var img = data.data[i]['head_logo'];
							var msg = data.data[i]['message'];
							console.log(img+"msg=" +msg+" nickname="+data.data[i]['nickname'])
							num++;
							oneMsgRend(msglist,img,msg,num,true);
						}
						/*轮询调用获取消息*/
						 msggetRequest();
					}
				})
			}
			msggetRequest();
			//发送消息按钮点击事件
			var btn = document.getElementById("sendmessage");
			btn.onclick=()=>{
				console.log("btn click");
				var e = document.getElementById("inputmessage"); //input文本.value;
				var img = localStorage.getItem('my_head_logo');
				if (e.value == "") {
					mui.alert('聊天内容不能为空')
					return;
				} else { //添加聊天内容
					try {
						msgSend(e.value);
					} catch (e) {
						//TODO handle the exception
						return;
					}
					let content = document.getElementsByTagName("ul")[0];
					num++;
					oneMsgRend(content,img, e.value, num);
				}
				//清空input
				e.value = "";
				document.getElementsByClassName("mui-scroll-wrapper")[0].scrollTop = document.getElementsByClassName(
					"mui-scroll-wrapper")[0].scrollHeight; //没有动画
			}
			function oneMsgRend(domp,img_logo, msg, msgNum, locationIsLeft = false) {
				domp.innerHTML += '<li><img src=".'+
				img_logo+
				'"/><span>' + msg + '</span></li>';
				// console.log(img_logo);
				let imgs = domp.getElementsByTagName("img");
				let spans = domp.getElementsByTagName("span");
				if (locationIsLeft) {
					imgs[num - 1].classList.add("imgleft");
					spans[num - 1].classList.add("spanleft");
				} else {
					imgs[num - 1].classList.add("imgright");
					spans[num - 1].classList.add("spanright");
				}
				imgs[num - 1].parentElement.classList.add("mui-table-view-cell");
				console.log(domp.innerHTML);
			}
			
	</script>
</html>